<template>
  <div class="header" ref="header" :style="colorStyle">
    <router-link to="/city" tag="div" class="city">
      <div class="local">
        {{nowCity}} <i class="iconfont icon-down">&#xe612;</i>
      </div>
      <span>多云 14°</span>
    </router-link>
    <div class="search">
      <i class="iconfont icon-search">&#xe62e;</i>
      <input type="text" placeholder="请输入搜索名称">
    </div>
    <div class="others">
      <i class="iconfont icon-plus">&#xe626;</i>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeHeader",
  data() {
    return {
      colorStyle: {},
      colorArr: []
    }
  },
  computed: {
    nowCity(){
      return this.$store.state.city
    } 
  },
  methods: {
    // 滚动事件
    handleScroll() {
      let top = document.documentElement.scrollTop;
      if( top > 30) {
        if( top  < 120) {
          this.colorStyle = {
            'background-color': this.colorArr[top],
            color: '#666'
          }
        }else{
          this.colorStyle = {
            'background-color': '#fff',
            color: '#333'
          }
        }
      }else{
        this.colorStyle = {
          'background-color': this.colorArr[0],
          color: '#fff'
        }
      }
    },
    // 颜色渐变转换
    gradient (startColor,endColor,step){
      //将hex转换为rgb
      var sColor = this.hexToRgb(startColor)
      var eColor = this.hexToRgb(endColor)

      //计算R\G\B每一步的差值
      var rStep = (eColor[0] - sColor[0]) / step,
          gStep = (eColor[1] - sColor[1]) / step,
          bStep = (eColor[2] - sColor[2]) / step;

      var gradientColorArr = [];
      for(var i=0;i<step;i++){
          //计算每一步的hex值
          gradientColorArr.push(this.rgbToHex(parseInt(rStep*i+sColor[0]),parseInt(gStep*i+sColor[1]),parseInt(bStep*i+sColor[2])));
      }
      return gradientColorArr;
    },
    // rgb转换hex
    rgbToHex(r, g, b){
      var hex = ((r<<16) | (g<<8) | b).toString(16);
      return "#" + new Array(Math.abs(hex.length-7)).join("0") + hex;
    },
    // hex 转换 rgb
    hexToRgb(hex){
      var rgb = [];
      for(var i=1; i<7; i+=2){
          rgb.push(parseInt("0x" + hex.slice(i,i+2)));
      }
      return rgb;
    }
  },
  activated() {
    // 获取header背景颜色
    let nowBGC = window.getComputedStyle(this.$refs.header).backgroundColor
    let regex = /rgb\((\d+), ?(\d+), ?(\d+)\)/
    let rgbArr = nowBGC.match(regex).splice(1, 3)
    // 转换rgb为hex
    let hexColor = this.rgbToHex(rgbArr[0],rgbArr[1],rgbArr[2])
    // 通过颜色渐变函数，获取渐变数组
    this.colorArr = this.gradient(hexColor, '#ffffff', 120)
    window.addEventListener('scroll', this.handleScroll)
  },
  // 全局事件解绑
  deactivated() {
    window.removeEventListener('scroll', this.handleScroll)
  },
}
</script>
<style lang="scss" scoped>
  // 导入基础变量
  @import '../../../assets/base.scss';
  .header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
    height: $headerHeight;
    background-color: $headerColor;
    color: #fff;
    .city {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-shrink: 0;
      padding: 0 20px;
      width: 150px;
      .local {
        display: flex;
        align-items: center;
        font-size: 24px;
        .icon-down {
          margin-left: 5px;
          font-size: 30px;
          font-weight: bolder;
        }
      }
      span {
        margin-top: 10px;
        font-size: 10px;
      }
    }
    .search {
      flex: 1;
      position: relative;
      padding-left: 60px;
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: 10px;
      .icon-search {
        position: absolute;
        left: 0;
        display: flex;
        width: 60px;
        height: 60px;
        align-items: center;
        justify-content: center;
        font-size: 50px;
        color: #666;
      }
      input {
        height: 60px;
        width: 100%;
        border: none;
        background-color: transparent;
        font-size: 30px;
      }
    }
    .others {
      width: 100px;
      flex-shrink: 0;
      text-align: center;
      line-height: 80px;
      .icon-plus {
        font-size: 40px;
      }
    }
  }
</style>
